<template>
  <div class="common-layout h100">
    <el-container class="h100">
      <el-header>
        <div class="logo"></div>

        <div class="logout">
          <el-button @click="logout">退出登录</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <!-- 导航菜单 -->
          <el-menu
            class="nav"
            router
            text-color="black"
            active-text-color="#ff8800 "
            background-color="#FAFAFA"
            default-active="/dashboard"
          >
            <template v-for="mi in menuItems">
              <el-sub-menu v-if="Array.isArray(mi.children)" :index="mi.name">
                <template #title>
                  <span>{{ mi.name }}</span>
                </template>
                <el-menu-item v-for="smi in mi.children" :index="smi.url">
                  <span>{{ smi.name }}</span>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :index="mi.url">
                <span>{{ mi.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.h100 {
  height: 100%;
}

header {
  height: 75px;
  background-color: #fafafa;
  display: flex;
}
.logout {
  position: absolute;
  right: 10px;
  top: 10px;
}
header > .logo {
  height: 75px;
  width: 300px;
  background: url("@/assets/logo（1）.png") no-repeat center center/cover;
}

aside {
  width: 200px;
  background-color: #fafafa;
}

.nav {
  border-right: none;
}
</style>

<script setup>
import { reactive } from "vue";
import { removeJwt } from "@/api/jwt.js";
import router from "@/router/index.js";
//所有导航菜单
const menuItems = reactive([
  {
    name: "数据看板",
    url: "/main/dashboard",
  },
  {
    name: "商品管理",
    children: [
      {
        name: "商品列表",
        url: "/main/goods",
      },
    ],
  },
  {
    name: "人员管理",
    children: [
      {
        name: "客户信息",
        url: "/main/member",
      },
    ],
  },
  {
    name: "订单管理",
    children: [
      {
        name: "订单列表",
        url: "/main/orders",
      },
    ],
  },
  {
    name: "系统管理",
    children: [
      {
        name: "管理员管理",
        url: "/main/user",
      },
    ],
  },
]);

//注销
function logout() {
  removeJwt();
  router.push("/login");
}
</script>
